<div *ngIf="portfolio">
    <div class="bg-primary text-white py-4">
        <div class="container">
            <h1 *ngIf="!portfolioNameEditIsVisible">{{ currentPortfolioName }}</h1>
            <input *ngIf="portfolioNameEditIsVisible" type="text" class="form-control mb-3" id="portfolioName" [(ngModel)]="newPortfolioName"
            /> Last edited: {{ portfolio.dateModified | date }}
            <span class="mx-3">Created by: {{ portfolio.addedByFullName }}</span>
            <button *ngIf="canEditPortfolio && !portfolioNameEditIsVisible" class="btn btn-sm btn-transparent white" (click)="portfolioNameEditIsVisible = true">Edit Name</button>
            <button *ngIf="portfolioNameEditIsVisible" class="btn btn-sm btn-transparent white" (click)="portfolioNameEditIsVisible = false">Cancel</button>
            <button *ngIf="portfolioNameEditIsVisible" class="btn btn-sm btn-white text-primary-dark" (click)="changeName()">Save</button>
        </div>
    </div>

    <div class="container mt-5">
        <div class="row d-flex align-items-center">
            <div class="col-md-2">
                <a href="javascript:;" class="text-link" [routerLink]="['../../']">
                    <i class="ti-arrow-left"></i> Back to Portfolios
                </a>
            </div>
            <div class="col-md-10 text-right">
                <div class="d-flex align-items-center">
                    <div *ngIf="canEditPortfolio" class="d-flex align-items-center">
                        Portfolio Sharing
                        <ui-switch size="small" class="ml-2 mt-2" [swal]="{
                                title: 'Portfolio Sharing',
                                text: 'Are you sure you want to ' + (portfolioShared ? 'unshare' : 'share') + ' this portfolio?',
                                type: '',
                                confirmButtonText: (portfolioShared ? 'Unshare' : 'Share'),
                                imageUrl: '/assets/icons-svg/icon-portfolio-sharing.svg',
                                imageClass: 'sweetalert-icon'
                            }" (confirm)="changePortfolioSharingStatus(sharingCheckbox)" (cancel)="portfolioShared = !portfolioShared"
                            [(ngModel)]="portfolioShared" [disabled]="!canEditPortfolio"></ui-switch>
                    </div>
                    <ng-container *ngIf="hasMonitoringClaim && !monitorAllChecked">
                        <div class="d-flex align-items-center ml-4">
                            Portfolio Monitoring
                            <ui-switch size="small" class="ml-2 mt-2" [swal]="{
                                    title: 'Portfolio Monitoring',
                                text: (portfolioMonitored ? 'Remove' : 'Add') + ' this portfolio '+ (portfolioMonitored ? 'from' : 'to')+' your alerts?',
                                    type: '',
                                confirmButtonText: 'Confirm',
                                    imageUrl: '/assets/icons-svg/icon-alerts-warning.svg',
                                    imageClass: 'sweetalert-icon'
                                }" (confirm)="changePortfolioMonitoredStatus(monitoringCheckbox)" (cancel)="portfolioMonitored = !portfolioMonitored"
                                [(ngModel)]="portfolioMonitored"></ui-switch>
                        </div>
                    </ng-container>
                    <div class="flex-fill text-right">
                        <button *ngIf="hasAnalyticsClaim == true" class="btn btn-transparent primary-dark" (click)="reportingModal.show()">
                            <i class="ti-bar-chart"></i> Portfolio Reports</button>
                        <button *ngIf="portfolio.isSystemPortfolio === false" class="btn btn-transparent primary-dark ml-3" (click)="exportPortfolio()">
                            <i class="ti-share"></i> Export</button>
                        <button *ngIf="canEditPortfolio" class="btn btn-primary-dark ml-3" data-toggle="modal" data-target="#addCompanyModal" (click)="addCompanyModal.show();">
                            <i class="ti-plus"></i> Add Company</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-5">
            <sustainalytics-table [columns]="securitiesColumns" [source]="securitiesSource" [filter]="" [elementCount]="securitiesCount"
                [displayTitle]="false" [paginationPositionDisplay]="paginationPosition" (changed)="tableOptionsChangedSecurities($event)"
                (buttonClicked)="onButtonClicked($event)">
            </sustainalytics-table>
        </div>

        <button class="btn btn-transparent-danger mt-4" [swal]="{
                title: 'Delete Portfolio',
                text: 'Are you sure you want to delete this portfolio?',
                type: '',
                confirmButtonClass: 'btn btn-danger',
                confirmButtonText: 'Delete',
                imageUrl: '/assets/icons-svg/icon-warning.svg',
                imageClass: 'sweetalert-icon'
            }" (confirm)="deletePortfolio()" [disabled]="!canEditPortfolio">
            <i class="ti-trash"></i> Delete Portfolio</button>
    </div>
</div>

<app-modal #addCompanyModal [id]="'addCompanyModal'" [size]="'modal-lg'">
    <div class="app-modal-header">
        Add Company to Portfolio
    </div>
    <div class="app-modal-body">
        <app-company-search #companySearchComponent [searchType]="searchTypeCompany" [hasAddButton]="true" (companyAdded)="addCompanyToPortfolio($event); addCompanyModal.hide();"></app-company-search>
    </div>
</app-modal>

<app-modal #reportingModal [id]="'reportingModal'" [size]="'modal-xl'" (hidden)="exagoUrl = undefined;">
    <div class="app-modal-header">
        Portfolio Reporting
    </div>
    <div *ngIf="hasAnalyticsClaim" class="app-modal-body">
        <p>Portfolio Reporting allows you to understand and manage ESG risk and opportunities at the portfolio level.</p>
        <div class="d-flex flex-row align-items-stretch">
            <div class="w-50 left-card stacked-card mb-4">
                <h5 class="ml-2">1. Select your Portfolio</h5>
                <select class="form-control w-75" [ngModel]="portfolioId" (change)="selectPortfolio($event.target, true)">
                    <optgroup *ngFor="let group of portfolioList" label="{{group.name}}">
                        <option *ngFor="let portfolio of group.children | exclude: secondSelection" [value]="portfolio.id" [attr.type]="portfolio.type">{{portfolio.name}}</option>
                    </optgroup>
                </select>
            </div>
            <div class="w-50 right-card stacked-card">
                <h5>2. Select your Benchmark</h5>
                <select class="form-control w-75" (change)="selectPortfolio($event.target, false)">
                    <option [value]='null' label="None"></option>
                    <optgroup *ngFor="let group of benchmarkList" label="{{group.name}}">
                        <option *ngFor="let portfolio of group.children | exclude: firstSelection" [value]="portfolio.id" [attr.type]="portfolio.type">{{portfolio.name}}</option>
                    </optgroup>
                </select>
            </div>
        </div>
        <div class="d-flex flex-row align-items-stretch">
            <div class="w-50 left-card stacked-card">
                <h5>3. Select the report</h5>
                <select class="form-control w-75" (change)="selectReport($event.target)">
                    <option [value]='null' label="None"></option>
                    <option *ngFor="let reportName of exagoReportNameList" [value]="reportName.path">{{reportName.name}}</option>
                </select>
            </div>
            <div *ngIf="exagoUrl == undefined" class="d-flex flex-row align-items-stretch">
                <div class="w-50">
                    <button class="btn btn-primary-dark mt-4" (click)="generate()" [disabled]="secondSelection == 'null'">4. Generate Report (PDF)</button>
                </div>
            </div>
        </div>
        <iframe *ngIf="exagoUrl !== undefined" [src]="exagoUrl | safe" class="mt-3 form-control mb-4" height="400px"></iframe>
        <div *ngIf="exagoUrl !== undefined" class="d-flex flex-row align-items-stretch">
            <button class="btn btn-transparent" (click)="exagoUrl = undefined" style="margin: auto">Cancel</button>
        </div>
    </div>
</app-modal>